<template>
	<view class="list">

		<uni-swipe-action>
			<view v-for="(item,index) in noticeListData" :key="index">
				<uni-swipe-action-item :right-options="options" @click="swipeActionClickHandler($event,item)">
					<view class="box">
						<view class="box-left">
							<view class="box-left-img">
								<image :src="item.senderHead"></image>
							</view>
						</view>
						<view class="box-center">
							<view class="box-title">
								<text>{{item.message}}</text>
							</view>
						</view>
						<view class="box-right">
							<view class="box-btn-0" v-if="item.state == 0">
								<view class="btn-msg">
									<text>对方未处理</text>
								</view>
							</view>
							<view class="box-btn-1" v-if="item.state == 1">
								<view class="btn-msg">
									<text>对方已同意</text>
								</view>
							</view>
							<view class="box-btn-2" v-if="item.state == 2">
								<view class="btn-msg">
									<text>对方已拒绝</text>
								</view>
							</view>
						</view>
					</view>
				</uni-swipe-action-item>
			</view>
		</uni-swipe-action>
	</view>
</template>

<script>
	import {
		addFriend
	} from '@/api/http/msg/relation.js'

	import {
		addGroup
	} from '@/api/http/msg/group.js'
	
	import {
		msgListFun
	} from '@/utils/msg/msglist.js'

	import {
		mapActions
	} from 'vuex'

	export default {
		props: ['noticeListData'],

		data() {
			return {
				userId: uni.getStorageSync('userId'),
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}],

			}
		},
		methods: {
			...mapActions('m_chat_user', ['setMsgList']),
			swipeActionClickHandler(e, item) {
				//console.log(item.id)
				var sysIds = item.id + ''
				this.$emit('cleanSystemMsg', sysIds)
			},
			//刷新页面数据
			refData() {
				this.$emit('refData')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list {
		width: 100%;
	}

	.box {
		display: flex;
		width: 90%;
		margin-left: 5%;
		// height: 120rpx;
		padding: 20rpx 0;

		.box-left {
			margin-top: 10rpx;
			width: 20%;

			image {
				width: 100rpx;
				height: 100rpx;
			}
		}

		.box-center {
			width: 50%;

			.box-title {
				line-height: 120rpx;

				text {
					color: rgba(166, 166, 166, 1);
					font-size: 20rpx;
					font-weight: 400;
				}
			}
		}

		.box-right {
			width: 30%;
			// display: flex;

			.box-btn-0 {
				.btn-msg {
					line-height: 120rpx;
					text-align: center;

					text {
						color: rgba(204, 204, 204, 1);
						font-size: 32rpx;
						font-weight: 400;
					}
				}

			}

			.box-btn-1 {
				.btn-msg {
					line-height: 120rpx;
					text-align: center;

					text {
						color: rgba(19, 176, 82, 1);
						font-size: 32rpx;
						font-weight: 400;
					}
				}

			}

			.box-btn-2 {
				.btn-msg {
					line-height: 120rpx;
					text-align: center;

					text {
						color: rgba(255, 112, 146, 1);
						font-size: 32rpx;
						font-weight: 400;
					}
				}

			}
		}
	}
</style>
